<template>
  <default-layout>
    <header-back text="职称申报" slot="header">
      <mt-button @click="goBack" slot="right">上一步</mt-button>
    </header-back>
    <div slot="main">
      <div class="form">
        <yd-cell-group>
          <yd-cell-item>
            <span slot="left" class="label required">第一学历：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择第一学历'}]"
              :list="edu"
              v-model="form.firstEdu"
              slot="right"
              placeholder="请选择第一学历"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">最高学历：</span>
            <xf-picker
              :list="edu"
              :valid="[{required: true, msg: '请选择最高学历'}]"
              v-model="form.highEdu"
              ref="highEdu"
              slot="right"
              placeholder="请选择最高学历"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label">其他学历：</span>
            <xf-picker
              :list="edu"
              v-model="form.otherEdu"
              ref="otherEdu"
              slot="right"
              placeholder="请选择其他学历"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label">申报材料：</span>
            <div class="file" slot="right">
              <upload-image
                v-model="file"
                type="23"
                file-name="附件"></upload-image>
            </div>
          </yd-cell-item>
        </yd-cell-group>
      </div>
      <div class="title-list">
        <div class="common-title">
          <span class="left">教育经历</span>
          <span @click="handleAdd">添加 <i class="xffont xf-more"></i></span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="award-list" v-if="!addForm" key="list">
            <loading-text v-if="eduLoading"></loading-text>
            <apply-empty v-if="!eduLoading && !edus.length"></apply-empty>
            <div v-for="(val, key) in edus" :key="key">
              <transition name="fade" mode="out-in">
                <div class="award-content" v-if="!toggle[key]" key="content">
                  <div class="award-left">
                    <span>{{val.aae030}}</span>
                    <span>{{val.aac045}}</span>
                  </div>
                  <div class="edit" @click="handleEdit(key, val)">
                    <i class="xffont xf-more1"></i>
                  </div>
                </div>
                <form-edu v-if="toggle[key]" @cancel="toggleShow(key)" key="form" :detail="codeEdit[key]" @save="handleSave"></form-edu>
              </transition>
            </div>
          </div>
          <form-edu v-if="addForm" @cancel="handleAdd" key="form" @save="handleSave"></form-edu>
        </transition>
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible">
        </mt-actionsheet>
      </div>
      <div class="next">
        <mt-button size="large" type="primary" @click="onSubmit">提交预审</mt-button>
      </div>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {dics, getDics} from '../../../common/js/dictionaries'
  import {validate, http, parse, echo, arrToForm} from '../../../common/js/util'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import FormEdu from '../../record/apply/form-edu'
  import {mapGetters} from 'vuex'
  import LoadingText from '../../../components/loading-text/loading-text'
  import ApplyEmpty from '../../record/apply/apply-empty'
  import UploadImage from '../../../components/upload-image/upload-image'

  export default {
    components: {
      UploadImage,
      ApplyEmpty,
      LoadingText,
      FormEdu,
      DefaultLayout,
      XfPicker,
      HeaderBack},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          highEdu: '', // 最高学历
          firstEdu: '', // 第一学历
          otherEdu: '' // 其它学历
        },
        edu: [], // 学历字典表
        toggle: [],
        codeEdit: [],
        edus: [], // 教育经历列表
        eduLoading: false,
        sheetVisible: false,
        delCode: '',
        delNum: '',
        addForm: false,
        actions: [{
          name: '编辑',
          method: () => {
            this.toggleShow(this.delNum, this.delCode)
          }
        }, {
          name: '删除',
          method: () => {
            this.$message.confirm('确定删除？').then(() => {
              this.delEdu()
            })
          }
        }],
        canLeave: false,
        file: ''
      }
    },
    methods: {
      getDics() {
        getDics(dics.edu).then(res => {
          this.edu = res[0]
        })
      },
      goBack() {
        this.canLeave = true
        this.$router.replace({name: 'title'})
      },
      toggleShow(num, code) {
        this.setCode(num, code)
        this.toggle[num] = !this.toggle[num]
        this.toggle = Array.prototype.slice.call(this.toggle)
      },
      setCode(num, code) {
        this.codeEdit[num] = code || ''
        this.codeEdit = Array.prototype.slice.call(this.codeEdit)
      },
      handleEdit(num, delCode) {
        this.delCode = delCode
        this.delNum = num
        this.sheetVisible = true
      },
      handleAdd() {
        this.addForm = !this.addForm
      },
      handleSave() {
        this.toggle = []
        this.addForm = false
        this.getEdus()
      },
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          const form = Object.assign({}, this.temp, this.form, arrToForm([this.file], 'attachmentList'))
          sessionStorage.setItem(STORAGE_TYPE.title, JSON.stringify(form))
          http({
            method: 'post',
            url: '/admin/person/sapi/title/declaration/save/apply/sign',
            data: form
          }, loading => {
            this.$message.loading(loading)
          }).then(res => {
            if (res.result === 1) {
              // this.$message.toast(res.message)
              this.canLeave = true
              this.$router.replace({name: 'titleSuccess'})
            } else {
              this.$message.alert(res.message)
            }
          })
        })
      },
      // 教育经历
      getEdus() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/education/list', {}, loading => {
          this.eduLoading = loading
        }, false).then(res => {
          this.edus = res.data.personEducation
        }).catch(() => {
          this.edus = []
        })
      },
      delEdu() {
        this.$post('/admin/person/sapi/personal/records/perEntry/delete/education', {
          aac0d0: this.delCode.aac0d0
        }).then(res => {
          this.$message.toast(res.message)
          this.getEdus()
        })
      }
    },
    created() {
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.title))
      if (!this.temp) {
        this.$router.replace({name: 'home'})
        return
      }
      echo(this.form, this.temp)
      this.getEdus()
    },
    mounted () {
      this.getDics()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .common-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
    border-bottom: 1px solid #d9d9d9;
    .left{
      display: inline-block;
      padding: 0 0 0 .3rem;
      border-left: 6px solid $primary;
      font-weight: bold;
    }
  }
  .title-list{
    background: #fff;
    margin: .15rem 0 0 0;
  }
  .award-content{
    margin: .15rem 0 0 0;
    padding: .2rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .award-left{
      display: flex;
      flex-direction: column;
      justify-content: center;
      span{
        &:first-child{
          font-size: .28rem;
        }
        &:not(:first-child){
          font-size: .3rem;
          color: #666;
          margin: .1rem 0 0 0;
        }
      }
    }
    .edit{
      padding: .2rem;
      .xffont{
        font-size: .5rem;
      }
    }
  }
  .next{
    padding: .2rem 0 0 0;
  }
  .file{
    width: 100%;
    padding: .2rem 0;
    .upload-img{
      width: 2.5rem;
    }
  }
</style>
